<template>
    <div class="app-container">
        <levelbar></levelbar>
          <div class="table-title">
            <el-form :model="classIdInfofamily" slot="form" label-width="80px">
                <div class="title margin-row margin-text">账户信息</div>
                <el-row :gutter="20" type="flex" justify="space-around" class="margin-row">
                    <el-col :span="6">
                        <el-button  @click="goBack">返回</el-button>
                        <el-button @click="btnInfor">更多信息</el-button>
                    </el-col>
                    <el-col :span="6"></el-col>
                    <el-col :span="6"></el-col>
                    <el-col :span="6">
                        
                    </el-col>
                </el-row>
            </el-form>
            <div class="border-center"></div>
          </div>
          <div>
            <settle></settle>
          </div>
          <!-- 更多信息 -->
          <moreInfor @sortInfor="sortInfor" v-if="moreMsg.dialogFormVisible" :moreMsg="moreMsg"></moreInfor>
          
    </div>
    
</template>
<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import moreInfor from './comps/moreInfor';
import settle from './comps/settle';
import { listPayIncrementDetailInfo } from 'api/settlemain';
export default {
    name: 'getDetails',
    components: { Levelbar, TableLayout, moreInfor, settle },
    created() {
        this.getstudentList();
    },
    watch: {
    // 局部刷新列表
        cacheUpdated(val) {
            val && this.getstudentList();
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated // 局部刷新列表
        }),
        ...mapGetters(['token'])
    },
    data() {
        return {
      // 班级信息集合
            classIdInfofamily: {},
            loading: false,
            listQuery: {
        // 分页
                page: 1,
                total: 0
            },
            moreMsg: {
                dialogFormVisible: false
            },
      // 表单数据集合
            inforList: []
        };
    },
    methods: {
    // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.loading = true;
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.getstudentList();
        },
        getstudentList() {
            this.loading = true;
            listPayIncrementDetailInfo(
        this.$route.params.startTime,
        this.$route.params.endTime,
        this.$route.params.id,
        this.listQuery.page,
        this.config.pageSize
      )
        .then(data => {
            this.loading = false;
            this.inforList = data.data.content.list;
            this.listQuery.total = data.data.content.pagination.total;
        })
        .catch(error => {
            this.loading = false;
        });
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.getstudentList();
        },
    // 导出
        exportMsg() {
      // console.log(this.token)
            if (this.inforList.length > 0) {
                window.location.href = `${
          LOCAL_API.ly
        }/agent/exportPayIncrementDetailInfo?intervalStartTime=${
          this.$route.params.startTime
        }&intervalEndTime=${this.$route.params.endTime}&AccessToken=${
          this.token
        }&pId=${this.$route.params.id}`;
            } else {
                this.$message({
                    message: '当前没有数据！',
                    type: 'warning'
                });
            }
        },
        btnInfor() {
            this.moreMsg.dialogFormVisible = true;
            this.moreMsg.state = this.$route.params.state;
            this.moreMsg.orgUserId = this.$route.params.orgUserId;
            this.moreMsg.id = this.$route.params.id;
        },
        goBack() {
            window.history.back();
        },
        sortInfor(e) {
            if (val) {
        // 从新发送请求
                this.moreMsg.dialogFormVisible = false;
                this.getstudentList();
            } else {
                this.getstudentList();
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.margin-button {
  margin-bottom: 15px;
}
.table-title {
  background: #fff;
}
.margin-row {
  padding: 0 20px;
}
.margin-text {
  padding-left: 40px;
}
.border-center {
  height: 21px;
  border-top:1px solid #dddddd;
  background: #F7F7F9;
  // margin: 30px 0 0px;
  
}
.title-describe {
  font-size: 14px;
  span {
    margin-right: 30px;
    color: #999999;
    margin-left: 18px;
  }
}
.title {
  position: relative;
  margin-bottom: 30px;
  font-size: 14px;
  &::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 2px;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
  }
}
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  .app-levelbar {
    height: 35px;
  }
  .el-form {
    padding: 20.5px 0;
    background: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    // padding-bottom: 50px;
  }
}
</style>
